---
title: Dart programming language
description: >-
  Dart is an approachable, portable, and productive language for
  high-quality apps on any platform.
layout: homepage
bodyClass: homepage
focusedLayout: true
showBreadcrumbs: false
---
<!-- Dart tag-line -->
<section id="site-content-title" class="dash-header-callout">
    <div class="callout-title">
        An approachable, portable, and productive language<br>for high-quality apps on any platform
    </div>

    <img class="made-by" src="assets/dash/2x/supported-by-google.png" alt="Supported by Google"/>
    <div class="callout-oss">
        <p>Dart is free and open source
            &nbsp;<a href="https://github.com/dart-lang/" title="Dart project GitHub organization">
                <svg><use href="/assets/img/social/github.svg#github"></use></svg>
            </a>
        </p>
    </div>

</section>

<!-- Dart pillars -->
<section class="dash-dart-features">
    <div class="feature">
        <div class="feature-icon"><img src="assets/dash/2x/multiplatform-performance-light-op1.png" alt="Multiplatform performance"/></div>
        <div class="feature-title">Approachable<br></div>
        <div class="feature-desc">Develop with a consistent, concise, and strongly typed
        programming language that offers modern features like null safety and pattern matching.
        </div>
    </div>
    <div class="feature">
        <div class="feature-icon"><img src="assets/dash/2x/productive-dev-light-op1.png" alt="Productive development"/></div>
        <div class="feature-title">Portable and fast</div>
        <div class="feature-desc">Compile to ARM, x64, and RISC-V machine
        code for mobile, desktop, and backend. Or, compile to JavaScript & WebAssembly
        for the web.</div>
    </div>
    <div class="feature">
        <div class="feature-icon"><img src="assets/dash/2x/client-optimized-light-op1.png" alt="Client optimised"/></div>
        <div class="feature-title">Productive</div>
        <div class="feature-desc">Make changes iteratively: use hot
        reload to see the result instantly in your running app.
        </div>
    </div>
</section>

<!-- Dart pillar details -->
<div class="dart-dash-details">
    <section class="dash-row">
        <div class="content-image">
            <img class="galleryOne" src="assets/dash/svg/1-1-async-await.svg" alt="Async await functions"/>
        </div>
        <div class="content-info">
            <div class="content-container">
                <div class="content-icon"><img src="assets/dash/2x/multiplatform-performance-light-op1.png" alt="Multiplatform performance"/> </div>
                <div class="content-feature">Approachable</div>
                <div class="content-desc" id="galleryOne">
                    <ul class="selector">
                        <li class="highlight" tabindex="0" data-banner="assets/dash/svg/1-1-async-await.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                Mature and complete <a href="/libraries/async/async-await">async-await</a>
                                for user interfaces containing event-driven code, paired with
                                <a href="/language/concurrency">isolate-based concurrency</a>.
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/1-2-language-optimized.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                Write safe and concise code using features like <a href="/null-safety">sound null safety</a>,
                                <a href="/language/collections#control-flow-operators">collection if</a>,
                                and <a href="/language/patterns">pattern matching</a>.
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/1-3-familiar-syntax.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                A consistent programming language, with an easy to learn and
                                <a href="/language">familiar syntax</a>.
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="dash-row">
        <div class="content-image">
            <img class="galleryThree" src="assets/dash/svg/3-1-aot-compile.svg" alt="Compiling dart file"/>
        </div>
        <div class="content-info">
            <div class="content-container">
                <div class="content-icon"><img src="assets/dash/2x/productive-dev-light-op1.png" alt="Multiplatform performance"/></div>
                <div class="content-feature">Portable and fast</div>
                <div class="content-desc" id="galleryThree">
                    <ul class="selector">
                        <li class="highlight" tabindex="0" data-banner="assets/dash/svg/3-1-aot-compile.svg">
                                <div class="bullet-container" aria-hidden="true">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    <a href="/overview#native-platform">AOT-compile</a> apps to native
                                    machine code for <a href="https://github.com/timsneath/time">instant startup</a>.
                                </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/3-2-target-web.svg">
                                <div class="bullet-container" aria-hidden="true">
                                    <div class="animated-bullet"></div>
                                </div>
                                <div class="bullet-text">
                                    Target the web with complete, mature, fast
                                    <a href="/overview#web-platform">compilers for JavaScript and WebAssembly</a>.
                                </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/3-3-backend-code.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                Run <a href="/tutorials/server/httpserver">backend code</a>
                                supporting your app, written using a single programming language.
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="dash-row">
        <div class="content-image">
            <img class="galleryTwo" src="assets/dash/svg/2-1-hot-reload-iterative-changes.svg" alt="Hot reload your changes"/>
        </div>
        <div class="content-info">
            <div class="content-container">
                <div class="content-icon"><img src="assets/dash/2x/client-optimized-light-op1.png" alt="Productive development"/></div>
                <div class="content-feature">Productive</div>
                <div class="content-desc" id="galleryTwo">
                    <ul class="selector">
                        <li class="highlight" tabindex="0" data-banner="assets/dash/svg/2-1-hot-reload-iterative-changes.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                Make changes to your source code iteratively, using
                                <a href="https://docs.flutter.dev/tools/hot-reload">hot reload</a>
                                to instantly see the effect in the running app.
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/2-2-flexible-type.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                Write code using a flexible type system with rich
                                static analysis and powerful, <a href="/tools/analysis">configurable tooling</a>.
                            </div>
                        </li>
                        <li tabindex="0" data-banner="assets/dash/svg/2-3-runtime-insight.svg">
                            <div class="bullet-container" aria-hidden="true">
                                <div class="animated-bullet"></div>
                            </div>
                            <div class="bullet-text">
                                Do <a href="https://docs.flutter.dev/tools/devtools/performance">profiling</a>,
                                <a href="https://docs.flutter.dev/tools/devtools/logging">logging</a>,
                                and <a href="https://docs.flutter.dev/tools/devtools/debugger">debugging</a>
                                with your code editor of choice.
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="dash-dartpad-row">
        <div class="dash-dartpad">
            <a id="try-dart" class="frontanchor" aria-hidden="true"></a>
            <h2>Try Dart in your browser</h2>
            <div id="dartpad-host">
                <iframe src="https://dartpad.dev?theme=dark" loading="lazy"></iframe>
            </div>
            <h3>Want more practice? <a href="/language">Learn the language</a>,
                explore the <a href="/libraries">core libraries</a>,
                or <a href="/tutorials/server/get-started">build a command-line app</a>.</h3>
        </div>
    </section>
</div>
